<template>
  <div class="container container-curr">
    <div id="quick"><QuickNavigation ></QuickNavigation></div>

      <Preferential id="preferential"></Preferential>
  </div>
  <div class="container card-curr">
    <Popular></Popular>
  </div>

</template>

<script>
// 快速导航
import QuickNavigation from "./home-components/QuickNavigation.vue";
// 广告轮播
import Preferential from "./home-components/Preferential.vue";
// 热门景点
import Popular from "./home-components/Popular.vue";

import constant from "../constant";
import {ref} from "vue";

export default {
  name: "Home",
  components:{
    QuickNavigation,
    Preferential,
    Popular
  },
  setup() {
    return {

    }
  }
}
</script>

<style scoped>
/* 快速导航 */
#quick {
  margin-right: 30px;
  width: 500px;
}
/* 轮播图*/
#preferential {
  margin-left: 60px;
  margin-top: 40px;
  /*position: relative;*/
  /*top: -310px;*/
  /*right: 100px;*/
  /*!*left: 500px;*!*/
  /*float: right;*/
  width: 700px;
}
/* 快速导航和轮播图 */
.container-curr {
  display: flex;
  flex-flow: row;
  justify-content: center;
  width: 100%;
  background-color:   #ecf5ff;
  height: 430px;
  margin: auto;
  padding-top: 20px;

}

.card-curr {
  display: flex;
  flex-flow: row;
  /*justify-content: center;*/
  justify-content: center;

  height: 750px;
  width: 100%;
}

</style>